import React from 'react';
import { Route, Routes, Link } from 'react-router-dom';
import MyLayout from './views/MyLayout'
import Login from './views/Login'
import Home from './views/Home'
import About from './views/About'
import Setting from './views/Setting'
import Todo from './views/Todo'
import Activity from './views/Activity'

function App() {

  return (
    <div className='app'>
      <div className='app-header'>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/setting">Setting</Link>
        <Link to="/todo">Todo</Link>
        <Link to="/activity">Activity</Link>
        <Link to="/login">Login</Link>
      </div>
      <Routes>
        <Route path="/" element={<MyLayout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="todo" element={<Todo />} />
          <Route path="activity" element={<Activity />} />
          <Route path="setting" element={<Setting />} />
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>
    </div>
  )
}

export default App;
